<template>
	<view>
		<u-navbar :is-back="false" :border-bottom='false' :background="background">
			<view class="slot-wrap">
				<view class="slot_reg" @click="$u.route('/pagesIndex/city/city')">
					<view class="reg_name" v-if="locationShow">{{locationName || '定位失败'}}</view>
					<view class="reg_name" v-else>获取中...</view>
					<u-icon name="arrow-down" v-if="locationShow" color="#fff" size="24"></u-icon>
				</view>
				<view class="slot-left">
					<text class="slot-left-text" v-if="initData">{{initData.app_name}}</text>
					<text class="slot-left-text" v-else>{{appName}}</text>
				</view>
			</view>
		</u-navbar>
		<view class="ym_background" v-if="initData">
			<image class="background" src="../../static/images/background.png" mode=""></image>
			<view class="ym-search">
				<u-search placeholder="搜索一下" @click="$u.route('/pages/search/search')" disabled v-model="keyword"
					:show-action="false"></u-search>
			</view>
			<view class="banner">
				<u-swiper :list="initData.home_banner" height="416"></u-swiper>
			</view>
		</view>
		<view class="gird" v-if="initData">
			<u-grid :col="5" :border="false">
				<u-grid-item style="background: rgba(0,0,0,0);" @click="$u.route(item.path)"
					v-for="(item,index) in initData.home_menu" :key="index">
					<u-image width="80rpx" height="80rpx" :src="item.image"></u-image>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="ad" v-if="initData">
			<u-image :border-radius="10" width="100%" height="200rpx" :src="initData.home_ad.image">
			</u-image>
		</view>
		<!-- 列表 -->
		<view class="home_title">
			<text class="t_line"></text>
			<text class="t_txt">最新信息</text>
		</view>
		<!--  -->
		<data-list></data-list>
		<!-- #ifdef MP -->
		<view style="height: 1rpx"></view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view style="height: 50px"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { APP_NAME } from '../../env.js'
	import DataList from '@/components/dataList/dataList.vue'
	export default {
		components: {
			DataList
		},
		data() {
			return {
				appName: '首页',
				background: {
					backgroundColor: '#00CE41',
				},
				keyword: '',
				initData: null,
				// 定位信息
				locationShow:false,
			}
		},
		computed: {
			...mapState({
				locationInfo: state => state.user.locationInfo,
				locationName: state => state.user.locationName,
			})
		},
		onLoad() {
			var that = this;
			this.$u.get('/addons/hicity/index/init', {}).then(res => {
				this.initData = res;
				uni.setStorageSync('initData', res);
			})
		},
		onShow() {
			this.$nextTick(()=>{
				if(this.locationName) return
				this.getLocation()
			})
		},
		onShareAppMessage() {
			return {
				title: APP_NAME,
				path: '/pages/index/index'
			}
		},
		methods: {
			// 获取定位
			getLocation(){
				var self = this
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.getLocation({
							type: 'gcj02',
							success: function(resl) {
								self.$store.commit('setLocationInfo',resl)
								uni.request({
									url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${encodeURIComponent(resl.latitude)},${encodeURIComponent(resl.longitude)}&key=D2BBZ-IBCWQ-IL75Z-4NABT-L3S46-LVB2U&get_poi=0`,
									method: 'GET',
									success: (resr)=> {
										self.locationShow = true
										if(resr.statusCode == 200){
											var txt=resr.data.result.address_component.city
											self.$store.commit('setLocationName',txt)
										}
									},
									fail() {
										self.locationShow = true
										this.$u.toast('获取位置失败')
									}
								})
							},
							fail: error => {
								console.log(error)
							}
						})
					},
					fail(error) {
						//失败的回调
						uni.showModal({
							title: '提示',
							content: '获取定位权限失败，是否立即授权',
							success(modalres) {
								if (modalres.confirm) {
									uni.openSetting()
								} else {
									self.locationShow = true
									uni.showToast({
										icon: 'none',
										title: '用户取消授权'
									})
								}
							},
						})
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.ym_background{
		position: relative;
		background: #fff;
		.background{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.ym-search {
		position: relative;
		z-index: 1;
		padding: 10rpx 20rpx 20rpx;
		background-color: #00CE41;
	}

	.slot-wrap {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 750rpx;
		//加入搜索框时去掉
		justify-content: center;
	}
	.slot_reg{
		position: absolute;
		top: 0;
		left: 20rpx;
		height: 100%;
		display: flex;
		align-items: center;
		.reg_name{
			font-size: 30rpx;
			color: #fff;
			padding-right: 10rpx;
		}
	}
	.slot-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0 20rpx;
		/* #ifdef MP */
		margin-bottom: 10rpx;

		/*  #endif  */
		.slot-left-text {
			font-size: 35rpx;
			color: white;
			margin-right: 10rpx;
		}
	}

	.search-wrap {
		margin: 0 20rpx;
		/*  #ifndef MP */
		flex: 1;
		/*  #endif  */
		/* #ifdef MP */
		width: 380rpx;
		margin-bottom: 10rpx;
		/*  #endif  */
	}

	.banner {
		position: relative;
		z-index: 1;
		margin: 0 20rpx 20rpx;
	}

	.gird {
		padding: 0 20rpx;
		background-color: white;
	}

	.ad {
		padding: 20rpx;
		background-color: white;
	}

	.info-margin {
		margin: 0 20rpx 20rpx 20rpx;
	}
	
	// 列表
	.home_title{
		width: 100%;
		padding: 30rpx 20rpx 0;
		display: flex;
		align-items: center;
		.t_line{
			display: block;
			width: 10rpx;
			height: 36rpx;
			background: #00CE41;
			border-radius: 5rpx;
		}
		.t_txt{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
			padding-left: 20rpx;
		}
	}
	
</style>
<style>
	.u-grid-item {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
